<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body{margin:0;padding:0;}
			.wrap{
				position:relative;
				margin:40px auto;
				width:800px;
				height:500px;
				/* background-color: pink; */
			}
			.wrap div{
				position:absolute;
				top:200px;
				left:300px;
				width:200px;
				height:200px;
				border-radius:200px 0;
				transform: rotate(-45deg);
				background-color: skyblue;
				transition:transform 2s;
				transform-origin:left bottom;
				opacity:.5;
			}
			.wrap:hover .tp2{
				transform:rotate(-65deg);
			}
			.wrap:hover .tp3{
				transform:rotate(-85deg);
			}
			.wrap:hover .tp4{
				transform:rotate(-105deg);
			}
			.wrap:hover .tp5{
				transform:rotate(-125deg);
			}
			.wrap:hover .tp6{
				transform:rotate(-25deg);
			}
			.wrap:hover .tp7{
				transform:rotate(-5deg);
			}
			.wrap:hover .tp8{
				transform:rotate(15deg);
			}
			.wrap:hover .tp9{
				transform:rotate(35deg);
			}
		</style>
	</head>
	<body>
		<div class='wrap'>
			<div class="tp1"></div>
			<div class="tp2"></div>
			<div class="tp3"></div>
			<div class="tp4"></div>
			<div class="tp5"></div>
			<div class="tp6"></div>
			<div class="tp7"></div>
			<div class="tp8"></div>
			<div class="tp9"></div>
		</div>
	</body>
</html>
